<template>
    <div>
        <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft"/>
        <div class="main">
            <h1 style="padding: 15px 0;">点击如下条目，获得演示效果；</h1>
            <van-cell-group>
                <van-cell icon="location-o" title="电量状态" :value="batStatus + '%'"/>
                <van-cell icon="location-o" title="获取位置" @click="getPosition" is-link/>
                <van-cell icon="chat-o" title="原生弹出提示框" @click="deviceAlert" is-link/>
                <van-cell icon="chat-o" title="原生弹出确认框" @click="deviceConfirm" is-link/>
            </van-cell-group>
        </div>
    </div>
</template>

<script>
    import device from "@/plugins/device";
    import {Toast} from "vant";

    export default {
        name: "device-api",
        data() {
            return {
                batStatus: "",
            }
        },
        created() {
            this.getBatteryStatus()
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            deviceConfirm() {
                device.confirm('我是提示语', '标题', '好')
            },
            deviceAlert() {
                device.alert('我是提示语', '标题', '好')
            },
            getPosition() {
                device.getPosition((position) => {
                    device.alert('纬度: ' + position.coords.latitude + '\n' +
                        '经度: ' + position.coords.longitude + '\n' +
                        '海拔高度: ' + position.coords.altitude + '\n' +
                        '准确度: ' + position.coords.accuracy + '\n' +
                        '海拔高度精度: ' + position.coords.altitudeAccuracy + '\n' +
                        '航向: ' + position.coords.heading + '\n' +
                        '速度: ' + position.coords.speed + '\n' +
                        '时间戳: ' + position.timestamp + '\n', '当前位置信息');
                })
            },
            getBatteryStatus() {
                device.batteryStatus((pos) => {
                    Toast(JSON.stringify(pos))
                    this.batStatus = pos.level
                })
            }
        }
    }
</script>

<style scoped>
    .main {
        padding: 20px;
    }
</style>
